<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- v-once指令:
		1.v-once所在节点在初次动态渲染后，就视为静态内容了。
		2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。 -->
		<div id="app">
			<h1 v-once>当前n的初始值是：{{n}}</h1>
			<h1>当前n的值是：{{n}}</h1>
			<button @click="n++">点我n+</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						n: 0
					}
				}

			});
		</script>
	</body>
</html>
